<template>
    <div style=" position: relative;"><el-card>
            <template #header>
                <!-- 搜索 -->
                <div>
                    <el-select v-if='role_off' clearable filterable v-model="find_data.customerId" placeholder="请选择客户"
                        style="width: 260px">
                        <el-option v-for="item in getCustomerList_list" :key="item.id" :label="item.customerName"
                            :value="item.id" />
                    </el-select>
                    <el-select filterable clearable v-model="find_data.deviceType" placeholder="请选择设备类型"
                        style="width: 260px;margin-left: 20px;">
                        <el-option label="测试桩" value="1" />
                        <el-option label="恒电位仪" value="2" />
                        <el-option label="绝缘接头" value="3" />
                        <el-option label="场站/阀室" value="4" />
                    </el-select>
                    <el-input clearable v-model="find_data.checkPointName" style="width: 260px;margin-left: 20px;"
                        placeholder="监测点名称" />
                    <el-date-picker v-model="find_data.startTime" type="datetime" format="YYYY-MM-DD HH:mm:ss"
                        value-format="YYYY-MM-DD HH:mm:ss" placeholder="开始时间" style="width: 260px;margin-left: 20px;" />
                    <el-date-picker v-model="find_data.endTime" type="datetime" format="YYYY-MM-DD HH:mm:ss"
                        value-format="YYYY-MM-DD HH:mm:ss" placeholder="结束时间" style="width: 260px;margin-left: 20px;" />
                    <el-button style="margin-left: 20px;height:30px" @click="search_btn" type="primary"
                        icon="Search">搜索</el-button>
                </div>
                <!-- 功能按钮 -->
                <div class="del_btn_Css">
                    <el-button @click="add_btn" type="primary" icon="CirclePlusFilled">新增</el-button>
                    <!-- <el-button @click="del_btn" type="danger" icon="DeleteFilled">删除</el-button>
                    <el-button @click="out_btn" type="warning" icon="Promotion">导出</el-button> -->
                </div>
            </template>
            <div>
                <el-table class="list_data_Css" border @selection-change="selection_change_btn" height="63vh"
                    ref="multipleTableRef" :data="list_data">
                    <el-table-column type="selection" width="35" />
                    <el-table-column label="编号" width="55" fixed type="index" />
                    <template v-for="item in table_data_list" :key="item.name">
                        <el-table-column v-if="item.enablePinning" :width="item.minWidth" :prop="item.name"
                            :label="item.displayName">
                            <template v-if="item.name == 'deviceType'" #="{ row, column, $index }">
                                {{ row.deviceType == '1' ? '阴极终端' : row.deviceType == '2' ? '恒电位仪' : row.deviceType ==
                                    '3' ? '绝缘接头' : row.deviceType == '4' ? '场站/阀室' : "" }}
                            </template>
                            <template v-if="item.name == 'sourceLngLat'" #="{ row, column, $index }">
                                {{ row.sourceLngLat == '0' ? '固定(手动录入)' : row.sourceLngLat == '1' ? ' 自动(现场采集)' : '未设置'
                                }}
                            </template>


                            <template v-if="item.name == 'set2'" #default="scope">
                                <el-button @click="up_btn(scope.row)" type="warning"
                                    icon="QuestionFilled">编辑</el-button>
                                <el-button @click="del_btn(scope.row)" type="danger" icon="RemoveFilled">删除</el-button>
                                <el-button @click="peizhi_btn(scope.row)" type="primary" icon="Menu">参数配置</el-button>
                                <el-button @click="shezhi_btn(scope.row)" type="primary" icon="Tools">规则设置</el-button>
                            </template>
                        </el-table-column>

                    </template>
                    <!-- <el-table-column fixed="right" label="操作" width="440">
                        <template >
                          
                        </template>
                    </el-table-column> -->
                </el-table>

            </div>
            <div class="current_change_btn_css">
                <el-pagination @current-change="current_change_btn" @size-change="size_change_btn"
                    v-model:current-page="find_data.pageNo" v-model:page-size="find_data.pageSize"
                    :page-sizes="[20, 50, 100, 200, 500]" :background="true"
                    layout="prev, pager, next, jumper,->,sizes,total," :total="total" />
            </div>
        </el-card>
    </div>

    <!-- 弹窗 -->
    <div>
        <!-- 新增 -->
        <el-dialog style="margin-top:5vh" v-model="add_off" :title="title" width="50%" :close-on-click-modal='false'>
            <el-form label-width="120px">
                <el-form label-width="120px" ref="ruleFormRef" label-suffix="：">
                    <el-form-item label="客户名称" required>
                        <el-select filterable @change="getPipeLineListByCusId_Api" v-model="add_data.customerId"
                            placeholder="请选择客户" style="width: 260px">
                            <el-option v-for="item in getCustomerList_list" :key="item.id" :label="item.customerName"
                                :value="item.id" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="管线名称" required>
                        <el-select filterable v-model="add_data.pipeLineId" placeholder="请选择管线名称" style="width: 260px">
                            <el-option v-for="item in getPipeLineListByCusId_list" :key="item.id"
                                :label="item.pipeLineName" :value="item.id" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="监测点名称" required>
                        <el-input @focus="checkPointName_change2" @blur="checkPointName_change" style="width: 400px;"
                            v-model="add_data.checkPointName" maxlength="20" placeholder="请输入监测点名称(最大长度为20位)"
                            show-word-limit type="text" />
                        <span v-if="checkPointName_off" style="margin-left: 20px;color:red">监测点名称已存在！</span>
                    </el-form-item>
                    <el-form-item label="设备类型" required>
                        <el-select v-model="add_data.deviceType" placeholder="请选择设备类型" style="width: 260px">
                            <el-option label="阴极终端" value="1" />
                            <el-option label="恒电位仪" value="2" />
                            <el-option label="绝缘接头" value="3" />
                            <el-option label="场站/阀室" value="4" />
                        </el-select>
                    </el-form-item>

                    <el-form-item label="经度" required>
                        <el-input style="width: 400px;" v-model="add_data.longitude" maxlength="20"
                            placeholder="请输入经度(最大长度为20位)" show-word-limit type="text" />
                    </el-form-item>
                    <el-form-item label="纬度" required>
                        <el-input style="width: 400px;" v-model="add_data.latitude" maxlength="20"
                            placeholder="请输入纬度(最大长度为20位)" show-word-limit type="text" />
                    </el-form-item>
                    <el-form-item label="地图坐标" required>
                        <el-select v-model="add_data.sourceLngLat" placeholder="请选择地图坐标" style="width: 260px">
                            <el-option label="固定(手动录入)" value="0" />
                            <el-option label="自动(现场采集)" value="1" />

                        </el-select>
                    </el-form-item>
                    <el-form-item label="终端编号" required>
                        <el-input style="width: 400px;" @focus="deviceNo_change2" @blur="deviceNo_change"
                            v-model="add_data.deviceNo" maxlength="20" placeholder="请输入终端编号(最大长度为20位)" show-word-limit
                            type="text" />
                        <span v-if="deviceNo_off" style="margin-left: 20px;color:red">终端编号已存在！</span>
                    </el-form-item>
                    <el-form-item label="安装地址" required>
                        <el-input v-model="add_data.address" maxlength="100" placeholder="请输入安装地址(最大长度为100位)"
                            show-word-limit type="text" />
                    </el-form-item>


                    <el-form-item label="备注">
                        <el-input :autosize="{ minRows: 4, maxRows: 8 }" v-model="add_data.remark" maxlength="150"
                            placeholder="请输入备注(最大长度为150位)" show-word-limit type="textarea" />
                    </el-form-item>

                </el-form>

            </el-form>
            <div style="display:flex;margin-left:40vw">
                <el-button type="warning" @click="add_no()">取 消</el-button>
                <el-button :disabled="deviceNo_off || checkPointName_off" type="primary" @click="add_ok()">确
                    定</el-button>

            </div>
        </el-dialog>

        <!-- 参数配置 -->
        <el-dialog style="margin-top:5vh" v-model="peizhi_off" title="参数配置：" width="50%" :close-on-click-modal='false'>
            <el-form label-width="150px" ref="ruleFormRef" label-suffix="：">
                <el-form-item label="监测点编号" required>
                    <el-input disabled v-model="peizhi_obj.deviceNo" placeholder="" type="text" />
                </el-form-item>
                <el-form-item label="监测点名称" required>
                    <el-input disabled v-model="peizhi_obj.checkPointName" placeholder="" type="text" />
                </el-form-item>
                <el-form-item label="采样间隔（s）" required>
                    <el-input v-model="peizhi_obj.jsonValue.sampInterval" placeholder="请输入采样间隔时间（范围：>=10 s）"
                        type="text" />
                </el-form-item>
                <template v-if="peizhi_data.deviceType == 2">
                    <el-form-item label="工作模式" required>
                        <el-select v-model="peizhi_obj.jsonValue.workWay" placeholder="请选择工作模式" style="width: 260px">
                            <el-option label="停机模式" value="0" />
                            <el-option label="恒电流模式" value="1" />
                            <el-option label="恒电压模式" value="2" />
                            <el-option label="恒电位仪模式" value="3" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="输出电压（V）" required>
                        <el-input v-model="peizhi_obj.jsonValue.outputVoltage" placeholder="请输入输出电压" type="text" />
                    </el-form-item>
                    <el-form-item label="输出电流（mA）" required>
                        <el-input v-model="peizhi_obj.jsonValue.outputCurrent" placeholder="请输入输出电流" type="text" />
                    </el-form-item>
                    <el-form-item label="输出电位（V）" required>
                        <el-input v-model="peizhi_obj.jsonValue.outputPotential" placeholder="请输入输出电位）" type="text" />
                    </el-form-item>
                    <el-form-item label-width="160px" label="试片断电电位（V）" required>
                        <el-input v-model="peizhi_obj.jsonValue.pieceOffPotential" placeholder="请输入试片断电电位"
                            type="text" />
                    </el-form-item>
                </template>
                <template v-if="peizhi_data.deviceType == 1">
                    <el-form-item label="发送间隔（s）" required>
                        <el-input v-model="peizhi_obj.jsonValue.sendInterval" placeholder="请输入发送间隔时间（范围：>=60 s）"
                            type="text" />
                    </el-form-item>
                    <el-form-item label-width="200px" label="断电电位采集时间（ms）" required>
                        <el-input v-model="peizhi_obj.jsonValue.offPotentialSampTime"
                            placeholder="请输入断电电位采集时间（范围：<=2000 ms）" type="text" />
                    </el-form-item>
                    <el-form-item label="离线同步" required>
                        <el-checkbox v-model="peizhi_obj.jsonValue.synchro" label="同步" size="large" />
                    </el-form-item>
                    <el-form-item v-if='peizhi_obj.jsonValue.synchro' label="离线同步时间" required>
                        <el-time-picker format="HH:mm:ss" value-format="HH:mm:ss"
                            v-model="peizhi_obj.jsonValue.synchroTime" placeholder="请输入离线同步时间" />
                    </el-form-item>
                    <el-form-item label="使能防盗报警" required>
                        <el-checkbox v-model="peizhi_obj.jsonValue.antitheftAlarm" label="开启" size="large" />
                    </el-form-item>
                    <el-form-item label="报警后连续在线" required>
                        <el-checkbox v-model="peizhi_obj.jsonValue.onlineAlarm" label="开启" size="large" />
                    </el-form-item>
                    <el-form-item label="使能连续在线" required>
                        <el-checkbox v-model="peizhi_obj.jsonValue.onlineContinu" label="开启" size="large" />
                    </el-form-item>
                    <template v-if='peizhi_obj.jsonValue.onlineContinu'>
                        <el-form-item label="开始时间" required>
                            <el-date-picker v-model="peizhi_obj.jsonValue.startTime" type="datetime"
                                format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" placeholder="开始时间" />
                        </el-form-item>
                        <el-form-item label="结束时间" required>
                            <el-date-picker v-model="peizhi_obj.jsonValue.endTime" type="datetime"
                                format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" placeholder="结束时间" />
                        </el-form-item>
                        <el-form-item label="采集间隔（s）" required>
                            <el-input v-model="peizhi_obj.jsonValue.iotSampInterval" placeholder="请输入采集间隔（范围：>=1 s）"
                                type="text" />
                        </el-form-item>
                        <el-form-item label="发送间隔（s）" required>
                            <el-input v-model="peizhi_obj.jsonValue.iotSendInterval" placeholder="请输入发送间隔（范围：>=1 s）"
                                type="text" />
                        </el-form-item>
                        <el-form-item label="极化时间（s）" required>
                            <el-input v-model="peizhi_obj.jsonValue.polTime" placeholder="请输入极化时间（范围：>=1 s）"
                                type="text" />
                        </el-form-item>
                        <el-form-item label="去极化时间（s）" required>
                            <el-input v-model="peizhi_obj.jsonValue.depolTime" placeholder="请输入去极化时间（范围：>=1 s）"
                                type="text" />
                        </el-form-item>
                        <el-form-item label-width="190px" label="去极化快采间隔（ms）" required>
                            <el-input v-model="peizhi_obj.jsonValue.depolFastInterval"
                                placeholder="请输入去极化快采间隔（范围：>=50 ms）" type="text" />
                        </el-form-item>
                        <el-form-item label-width="160px" label="快采持续时间（s）" required>
                            <el-input v-model="peizhi_obj.jsonValue.fastContiTime" placeholder="请输入快采持续时间（范围：<=10 s）"
                                type="text" />
                        </el-form-item>
                        <el-form-item label="使能同步通断" required>
                            <el-checkbox v-model="peizhi_obj.jsonValue.iotSynorOnOff" label="开启" size="large" />
                        </el-form-item>
                        <el-form-item label="使能GPS/BD" required>
                            <el-checkbox v-model="peizhi_obj.jsonValue.IotGpsBd" label="开启" size="large" />
                        </el-form-item>

                    </template>
                    <el-form-item label="使能触发采集" required>
                        <el-checkbox v-model="peizhi_obj.jsonValue.IotTriggerSamp" label="开启" size="large" />
                    </el-form-item>
                    <template v-if='peizhi_obj.jsonValue.IotTriggerSamp'>
                        <el-form-item label="通电值（V）" required>
                            <el-input style='width:300px' v-model="peizhi_obj.jsonValue.onStartValue"
                                placeholder="通电值（范围：-100~+100 V）" type="text" />
                            <通电值< <el-input style='width:300px' v-model="peizhi_obj.jsonValue.onEndValue"
                                placeholder="通电值（范围：-100~+100 V）" type="text" />
                        </el-form-item>
                        <el-form-item label="断电值（V）" required>
                            <el-input style='width:300px' v-model="peizhi_obj.jsonValue.offStartValue"
                                placeholder="断电值（范围：-100~+100 V）" type="text" />
                            <断电值< <el-input style='width:300px' v-model="peizhi_obj.jsonValue.offEndValue"
                                placeholder="断电值（范围：-100~+100 V）" type="text" />
                        </el-form-item>
                        <el-form-item label="交流电位（V）" required>
                            交流电位 >=
                            <el-input style='width:300px' v-model="peizhi_obj.jsonValue.acPotStartValue"
                                placeholder="交流电位（范围：<380 V）" type="text" />
                        </el-form-item>
                        <el-form-item label-width="200px" label="交流电流密度（A/m²）" required>
                            交流电流密度 >=
                            <el-input style='width:300px' v-model="peizhi_obj.jsonValue.acDensityStartValue"
                                placeholder="交流电流密度（单位:A/m²）" type="text" />
                        </el-form-item>
                        <el-form-item label="直流电流（mA）" required>
                            <el-input style='width:300px' v-model="peizhi_obj.jsonValue.directCurStartValue"
                                placeholder="直流电流（范围：-300~+300 V）" type="text" />
                            < 直流电流 < <el-input style='width:300px' v-model="peizhi_obj.jsonValue.directCurEndValue"
                                placeholder="直流电流（范围：-300~+300 V）" type="text" />
                        </el-form-item>
                        <el-form-item label-width="160px" label="触发采集间隔（s）" required>

                            <el-input v-model="peizhi_obj.jsonValue.triggerSampInterval" placeholder="触发采集间隔（范围：>=10 s）"
                                type="text" />
                        </el-form-item>
                        <el-form-item label-width="160px" label="触发发送间隔（s）" required>

                            <el-input v-model="peizhi_obj.jsonValue.triggerSendInterval" placeholder="触发发送间隔（范围：>=60 s）"
                                type="text" />
                        </el-form-item>
                    </template>
                </template>



            </el-form>
            <div style="display:flex;margin-left:40vw">
                <el-button type="warning" @click="peizhi_no()">取 消</el-button>
                <el-button type="primary" @click="peizhi_ok()">确 定</el-button>

            </div>
        </el-dialog>

        <!-- 规则设置列表 -->
        <el-dialog style="margin-top:5vh" v-model="shezhi_off" title="规则设置列表" width="90%" :close-on-click-modal='false'>
            <div style=" position: relative;"><el-card>
                    <template #header>
                        <!-- 搜索 -->
                        <div>
                            <el-input clearable v-model="find_data2.ruleName" style="width: 260px;"
                                placeholder="规则名称" />
                            <el-button style="margin-left: 20px;height:30px" @click="search_btn2" type="primary"
                                icon="Search">搜索</el-button>
                        </div>
                        <!-- 功能按钮 -->
                        <div class="del_btn_Css">
                            <el-button @click="add_btn2" type="primary" icon="CirclePlusFilled">新增</el-button>
                            <!-- <el-button @click="del_btn" type="danger" icon="DeleteFilled">删除</el-button>
                            <el-button @click="out_btn" type="warning" icon="Promotion">导出</el-button> -->
                        </div>
                    </template>
                    <div>
                        <el-table class="list_data_Css" border @selection-change="selection_change_btn2" height="60vh"
                            ref="multipleTableRef" :data="list_data2">
                            <el-table-column type="selection" width="35" />
                            <el-table-column label="编号" width="55" fixed type="index" />
                            <template v-for="item in table_data_list2" :key="item.name">
                                <el-table-column v-if="item.enablePinning" :width="item.minWidth" :prop="item.name"
                                    :label="item.displayName">
                                    <template v-if="item.name == 'type'" #="{ row, column, $index }">
                                        {{ row.type == '1' ? '测试桩' : row.type == '2' ? '恒电位仪' : "绝缘接头" }}
                                    </template>
                                    <template v-if="item.name == 'value'" #="{ row, column, $index }">
                                        {{ value_text(row) }}
                                    </template>
                                    <template v-if="item.name == 'set'" #="{ row, column, $index }">
                                        <el-button @click="up_btn2(row)" type="warning"
                                            icon="QuestionFilled">编辑</el-button>
                                        <el-button @click="del_btn2(row)" type="danger"
                                            icon="RemoveFilled">删除</el-button>
                                    </template>
                                </el-table-column>
                            </template>
                        </el-table>

                    </div>
                    <div class="current_change_btn_css">
                        <el-pagination @current-change="current_change_btn2" @size-change="size_change_btn2"
                            v-model:current-page="find_data2.pageNo" v-model:page-size="find_data2.pageSize"
                            :page-sizes="[20, 50, 100, 200, 500]" :background="true"
                            layout="prev, pager, next, jumper,->,sizes,total," :total="total2" />
                    </div>
                </el-card>
            </div>
            <!-- 新增 -->
            <el-dialog append-to-body style="margin-top:5vh" v-model="add_off2" :title="title2" width="50%"
                :close-on-click-modal='false'>
                <el-form label-width="120px">
                    <el-form label-width="120px" ref="ruleFormRef3" label-suffix="：">
                        <el-form-item label="规则名称" required>
                            <el-select v-model="add_data2.ruleName" placeholder="请选择规则名称" style="width: 260px">
                                <el-option label="断电欠保护" value="断电欠保护" />
                                <el-option label="探头1交流腐蚀" value="探头1交流腐蚀" />
                                <el-option label="探头2交流腐蚀" value="探头2交流腐蚀" />
                                <el-option label="现场设备断路" value="现场设备断路" />
                                <el-option label="交流腐蚀" value="交流腐蚀" />
                                <el-option label="交流干扰报警" value="交流干扰报警" />
                                <el-option label="断电过保护" value="断电过保护" />
                                <el-option label="欠极化" value="欠极化" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="规则类型" required>
                            <el-select @change="type_change2" v-model="add_data2.type" placeholder="请选择规则类型"
                                style="width: 260px">
                                <el-option label="测试桩" value="1" />
                                <el-option label="恒电位仪" value="2" />
                                <el-option label="绝缘接头" value="3" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="属性名称" required>
                            <el-select filterable v-model="add_data2.ruleKey" placeholder="请选择属性名称"
                                style="width: 260px">
                                <el-option v-for="item in getAlarmTypeList_list" :key="item.actiValue"
                                    :label="item.showValue" :value="item.actiValue" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="规则符号" required>
                            <el-select v-model="add_data2.symbol" placeholder="请选择规则符号" style="width: 260px">
                                <el-option label=">" value=">" />
                                <el-option label="<" value="<" />
                                <el-option label="&&" value="&&" />
                                <el-option label="||" value="||" />
                            </el-select>
                        </el-form-item>
                        <template v-if="add_data2.symbol == '>' || add_data2.symbol == '<'">
                            <el-form-item label="属性值" required>
                                <el-input v-model="add_data2.value" maxlength="10"
                                    placeholder="请输入属性值(属性值为正整数,最大长度为10位)" show-word-limit type="number" />
                            </el-form-item>
                        </template>
                        <template v-if="add_data2.symbol == '&&' || add_data2.symbol == '||'">
                            <el-form-item label="开始值" required>
                                <el-input v-model="add_data2.startValue" maxlength="10"
                                    placeholder="请输入开始值(开始值为正整数,最大长度为10位)" show-word-limit type="number" />
                            </el-form-item>
                            <el-form-item label="结束值" required>
                                <el-input v-model="add_data2.endValue" maxlength="10"
                                    placeholder="请输入结束值(结束值为正整数,最大长度为10位)" show-word-limit type="number" />
                            </el-form-item>

                        </template>

                        <el-form-item label="备注">
                            <el-input :autosize="{ minRows: 4, maxRows: 8 }" v-model="add_data2.remark" maxlength="150"
                                placeholder="请输入备注(最大长度为150位)" show-word-limit type="textarea" />
                        </el-form-item>

                    </el-form>

                </el-form>
                <div style="display:flex;margin-left:40vw">
                    <el-button type="warning" @click="add_no2()">取 消</el-button>
                    <el-button type="primary" @click="add_ok2()">确 定</el-button>

                </div>
            </el-dialog>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed, watch, nextTick, shallowRef } from 'vue'
import {
    getCheckPointListByPage, saveCheckPoint, updateCheckPoint, deleteCheckPoint, getCustomerList, getPipeLineListByCusId,
    getChePointParaByDeviceNo, updateCheckPointParam, getAlarmRuleListByPage, saveAlarmRule, updateAlarmRule, deleteAlarmRule,
    getAlarmTypeList, checkExiCheckPointName, checkExiEndTagName
} from '@/api/customer_hub.js'
import { ElMessage, ElLoading, ElMessageBox } from 'element-plus'
import CircularJSON from 'circular-json'
import { ImageUrl_upload } from '@/utils/common.js'
import { GET_TOKEN } from '@/utils/token.js'
onMounted(async () => {


    let monitoring_point_management = JSON.parse(localStorage.getItem('monitoring_point_management'))
    if (monitoring_point_management) {
        find_data.checkPointName = monitoring_point_management.checkPointName
        find_data.customerId = monitoring_point_management.customerId
        find_data.deviceType = monitoring_point_management.deviceType
        find_data.endTime = monitoring_point_management.endTime
        find_data.pipeLineId = monitoring_point_management.pipeLineId
        find_data.startTime = monitoring_point_management.startTime

        await role_api()
        await getCustomerList_Api()
        await list_api()
    } else {
        await role_api()
        await getCustomerList_Api()
        await list_api()
    }

})


//#region 登录角色判断 
//  
let role_off = ref(true)
let role_id = ref('')
let role_customerId = ref('')
const role_api = () => {
    let luser = JSON.parse(localStorage.getItem('luser'))
    if (luser.loginName != 'admin') {
        role_off.value = false
        role_id.value = luser.id
        find_data.customerId = luser.customerId

    }
}
// #endregion

const getCustomerList_list = ref([])
const getCustomerList_Api = () => {
    getCustomerList({}).then(res => {
        getCustomerList_list.value = res.value
    })
}
const getPipeLineListByCusId_list = ref([])
const getPipeLineListByCusId_Api = () => {
    let ps = []
    ps.push(add_data.customerId)
    getPipeLineListByCusId(ps).then(res => {
        getPipeLineListByCusId_list.value = res.value
    })
}
const type_change2 = () => {
    add_data2.ruleKey = ''
    getAlarmTypeList_Api()
}
const getAlarmTypeList_list = ref([])
const getAlarmTypeList_Api = () => {
    getAlarmTypeList({
        type: add_data2.type
    }).then(res => {
        getAlarmTypeList_list.value = res.value
    })
}
//#region 分页列表
const list_data = ref([])
const find_data = reactive({
    pageNo: 1,
    pageSize: 20,
    customerId: '',
    checkPointName: '',
    deviceType: '',
    endTime: '',
    startTime: '',
    pipeLineId: '',

})
const total = ref(0)

// 分页器一夜显示多少数据页面
const size_change_btn = () => {
    find_data.pageNo = 1
    list_api()
}

// 分页器跳转页面
const current_change_btn = () => {
    list_api()
}

const list_api = () => {
    const loading = ElLoading.service({
        lock: true,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    getCheckPointListByPage(find_data).then(res => {

        if (res.resultStatus.resultCode == '0000') {
            list_data.value = res.value.list
            total.value = res.value.total
        } else {
            return ElMessage({
                message: res.resultStatus.resultMessage,
                type: 'warning',
            })
        }
        loading.close()

    })
}
//#endregion

//#region 表格数据处理
const table_data_list = reactive([
    { name: 'checkPointName', displayName: '监测点名称', minWidth: '150', enablePinning: true },
    { name: 'customerName', displayName: '客户名称', minWidth: '200', enablePinning: true },
    { name: 'pipeLineName', displayName: '管线名称', minWidth: '200', enablePinning: true },
    { name: 'deviceType', displayName: '设备类型', minWidth: '100', enablePinning: true },
    { name: 'deviceNo', displayName: '设备编号', minWidth: '120', enablePinning: true },
    { name: 'longitude', displayName: '经度', minWidth: '130', enablePinning: true },
    { name: 'latitude', displayName: '纬度', minWidth: '130', enablePinning: true },
    { name: 'sampTime', displayName: '最新采集时间', minWidth: '180', enablePinning: true },
    { name: 'sourceLngLat', displayName: '地图坐标', minWidth: '120', enablePinning: true },
    { name: 'createTime', displayName: '添加时间', minWidth: '200', enablePinning: true },
    { name: 'updateTime', displayName: '修改时间', minWidth: '200', enablePinning: true },
    { name: 'set2', displayName: '操作', minWidth: '450', enablePinning: true },
])




//#endregion

//#region 表格选择
const table_list = ref([])
const selection_change_btn = (e) => {
    table_list.value = e
    console.log(e)
}
//#endregion

//#region 新增
const add_off = ref(false)
const add_data = reactive({
    address: '',
    checkPointName: '',
    customerId: '',
    deviceNo: '',
    deviceType: '',
    latitude: '',
    longitude: '',
    pipeLineId: '',
    remark: '',
    sourceLngLat: '0',
    id: '',
})
const add_btn = () => {
    up_data.value.fileName = ''
    title.value = '新增监测点:'
    add_data.address = ''
    add_data.checkPointName = ''
    add_data.customerId = ''
    add_data.deviceNo = ''
    add_data.deviceType = ''
    add_data.latitude = ''
    add_data.longitude = ''
    add_data.pipeLineId = ''
    add_data.remark = ''
    add_data.sourceLngLat = '0'

    add_data.id = ''

    up_off.value = false
    add_off.value = true

}

const imageUrl = ref('')
const checkPointName_off = ref(false)
const checkPointName_change = (e) => {
    let ps = {
        checkPointName: add_data.checkPointName,
        pipeLineId: add_data.pipeLineId,
        id: add_data.id,
    }
    checkExiCheckPointName(ps).then(res => {
        if (res.resultStatus.resultCode == '0000') {
            checkPointName_off.value = false
        } else {
            checkPointName_off.value = true
        }
    })
}
const checkPointName_change2 = (e) => {
    checkPointName_off.value = false
}
const deviceNo_off = ref(false)
const deviceNo_change = () => {
    let ps = {
        deviceNo: add_data.deviceNo,
        id: add_data.id,
    }
    checkExiEndTagName(ps).then(res => {
        if (res.resultStatus.resultCode == '0000') {
            deviceNo_off.value = false
        } else {
            deviceNo_off.value = true
        }
    })
}
const deviceNo_change2 = (e) => {
    deviceNo_off.value = false
}

const add_ok = () => {

    if (!add_data.customerId) {
        return ElMessage({
            message: '请填写客户名称',
            type: 'warning',
        })
    } else if (!add_data.pipeLineId) {
        return ElMessage({
            message: '请填写管线名称',
            type: 'warning',
        })
    } else if (!add_data.checkPointName) {
        return ElMessage({
            message: '请填写监测点名称',
            type: 'warning',
        })
    } else if (!add_data.deviceType) {
        return ElMessage({
            message: '请填写设备类型',
            type: 'warning',
        })
    } else if (!add_data.latitude) {
        return ElMessage({
            message: '请填写纬度',
            type: 'warning',
        })
    } else if (!add_data.longitude) {
        return ElMessage({
            message: '请填写经度',
            type: 'warning',
        })
    } else if (!add_data.deviceNo) {
        return ElMessage({
            message: '请填写终端编号',
            type: 'warning',
        })
    } else if (!add_data.address) {
        return ElMessage({
            message: '请填写安装地址',
            type: 'warning',
        })
    }






    if (up_off.value) {
        updateCheckPoint(add_data).then(res => {
            if (res.resultStatus.resultCode == '0000') {
                list_api()
                add_off.value = false
                return ElMessage({
                    message: res.resultStatus.resultMessage,
                    type: 'success',
                })
            } else {
                return ElMessage({
                    message: res.resultStatus.resultMessage,
                    type: 'warning',
                })
            }
        })
    } else {
        saveCheckPoint(add_data).then(res => {
            if (res.resultStatus.resultCode == '0000') {
                list_api()
                add_off.value = false
                return ElMessage({
                    message: res.resultStatus.resultMessage,
                    type: 'success',
                })
            } else {
                return ElMessage({
                    message: res.resultStatus.resultMessage,
                    type: 'warning',
                })
            }
        })
    }



}

const add_no = () => {
    add_off.value = false
}

const title = ref('新增人员:')
const up_off = ref(false)
const up_data = ref({})
//#region 修改
const up_btn = async (e) => {



    add_data.address = e.address
    add_data.checkPointName = e.checkPointName

    add_data.customerId = e.customerId
    await getPipeLineListByCusId_Api()
    add_data.deviceNo = e.deviceNo
    add_data.deviceType = e.deviceType
    add_data.latitude = e.latitude
    add_data.longitude = e.longitude
    add_data.pipeLineId = e.pipeLineId
    add_data.remark = e.remark
    add_data.sourceLngLat = e.sourceLngLat ? e.sourceLngLat : '0'

    add_data.id = e.id
    up_data.value = e
    title.value = '修改监测点:'

    up_off.value = true
    add_off.value = true

}

//#endregion

//#region 参数配置
const peizhi_obj = reactive({
    id: '',
    deviceNo: '',
    checkPointName: '',
    jsonValue: {
        sampInterval: '',
        sendInterval: '',
        offPotentialSampTime: '',
        synchro: false,
        synchroTime: '',
        antitheftAlarm: false,
        onlineAlarm: false,
        onlineContinu: false,
        startTime: '',
        endTime: '',
        iotSampInterval: '',
        iotSendInterval: '',
        polTime: '',
        depolTime: '',
        depolFastInterval: '',
        fastContiTime: '',
        iotSynorOnOff: false,
        IotGpsBd: false,
        IotTriggerSamp: false,
        onStartValue: '',
        onEndValue: '',
        offStartValue: '',
        offEndValue: '',
        acPotStartValue: '',
        acDensityStartValue: '',
        directCurStartValue: '',
        directCurEndValue: '',
        triggerSampInterval: '',
        triggerSendInterval: '',
        outputVoltage: '',
        outputCurrent: '',
        outputPotential: '',
        pieceOffPotential: '',
        workWay: '',
    }
})
const peizhi_off = ref(false)
const peizhi_data = ref({})
const peizhi_getChePointParaByDeviceNo = ref({})
const peizhi_btn = (e) => {
    peizhi_data.value = e
    peizhi_clrear()
    getChePointParaByDeviceNo({ deviceNo: e.deviceNo }).then(res => {
        peizhi_getChePointParaByDeviceNo.value = res.value

        peizhi_obj.id = peizhi_getChePointParaByDeviceNo.value.id ? peizhi_getChePointParaByDeviceNo.value.id : e.id
        peizhi_obj.deviceNo = peizhi_getChePointParaByDeviceNo.value.deviceNo ? peizhi_getChePointParaByDeviceNo.value.deviceNo : e.deviceNo
        peizhi_obj.checkPointName = peizhi_getChePointParaByDeviceNo.value.checkPointName ? peizhi_getChePointParaByDeviceNo.value.checkPointName : e.checkPointName

        if (peizhi_getChePointParaByDeviceNo.value.jsonValue) {
            peizhi_getChePointParaByDeviceNo.value.jsonValue = JSON.parse(peizhi_getChePointParaByDeviceNo.value.jsonValue);
            peizhi_obj.jsonValue = peizhi_getChePointParaByDeviceNo.value.jsonValue
            peizhi_obj.jsonValue.synchro == 2 ? peizhi_obj.jsonValue.synchro = false : peizhi_obj.jsonValue.synchro = true
            peizhi_obj.jsonValue.antitheftAlarm == 2 ? peizhi_obj.jsonValue.antitheftAlarm = false : peizhi_obj.jsonValue.antitheftAlarm = true
            peizhi_obj.jsonValue.onlineAlarm == 2 ? peizhi_obj.jsonValue.onlineAlarm = false : peizhi_obj.jsonValue.onlineAlarm = true
            peizhi_obj.jsonValue.onlineContinu == 2 ? peizhi_obj.jsonValue.onlineContinu = false : peizhi_obj.jsonValue.onlineContinu = true
            peizhi_obj.jsonValue.iotSynorOnOff == 2 ? peizhi_obj.jsonValue.iotSynorOnOff = false : peizhi_obj.jsonValue.iotSynorOnOff = true
            peizhi_obj.jsonValue.IotGpsBd == 2 ? peizhi_obj.jsonValue.IotGpsBd = false : peizhi_obj.jsonValue.IotGpsBd = true
            peizhi_obj.jsonValue.IotTriggerSamp == 2 ? peizhi_obj.jsonValue.IotTriggerSamp = false : peizhi_obj.jsonValue.IotTriggerSamp = true
        } else {
            peizhi_obj.jsonValue.synchro = false
            peizhi_obj.jsonValue.antitheftAlarm = false
            peizhi_obj.jsonValue.onlineAlarm = false
            peizhi_obj.jsonValue.onlineContinu = false
            peizhi_obj.jsonValue.iotSynorOnOff = false
            peizhi_obj.jsonValue.IotGpsBd = false
            peizhi_obj.jsonValue.IotTriggerSamp = false

        }



        peizhi_off.value = true

    })

}
const peizhi_no = () => {
    peizhi_off.value = false
}
const peizhi_ok = () => {
    let ps = peizhi_obj
    ps.jsonValue.synchro == false ? peizhi_obj.jsonValue.synchro = 2 : peizhi_obj.jsonValue.synchro = 1
    ps.jsonValue.antitheftAlarm == false ? peizhi_obj.jsonValue.antitheftAlarm = 2 : peizhi_obj.jsonValue.antitheftAlarm = 1
    ps.jsonValue.onlineAlarm == false ? peizhi_obj.jsonValue.onlineAlarm = 2 : peizhi_obj.jsonValue.onlineAlarm = 1
    ps.jsonValue.onlineContinu == false ? peizhi_obj.jsonValue.onlineContinu = 2 : peizhi_obj.jsonValue.onlineContinu = 1
    ps.jsonValue.iotSynorOnOff == false ? peizhi_obj.jsonValue.iotSynorOnOff = 2 : peizhi_obj.jsonValue.iotSynorOnOff = 1
    ps.jsonValue.IotGpsBd == false ? peizhi_obj.jsonValue.IotGpsBd = 2 : peizhi_obj.jsonValue.IotGpsBd = 1
    ps.jsonValue.IotTriggerSamp == false ? peizhi_obj.jsonValue.IotTriggerSamp = 2 : peizhi_obj.jsonValue.IotTriggerSamp = 1
    ps.jsonValue.isPageSet = 1
    ps.jsonValue = JSON.stringify(ps.jsonValue);

    updateCheckPointParam(ps).then(res => {
        if (res.resultStatus.resultCode == '0000') {
            list_api()
            ps.jsonValue = JSON.parse(ps.jsonValue);
            peizhi_off.value = false
            return ElMessage({
                message: res.resultStatus.resultMessage,
                type: 'success',
            })
        } else {
            ps.jsonValue = JSON.parse(ps.jsonValue);
            return ElMessage({
                message: res.resultStatus.resultMessage,
                type: 'warning',
            })
        }
    })




}
const peizhi_clrear = () => {
    peizhi_obj.id = ''
    peizhi_obj.deviceNo = ''
    peizhi_obj.checkPointName = ''
    peizhi_obj.jsonValue.sampInterval = ''
    peizhi_obj.jsonValue.sendInterval = ''
    peizhi_obj.jsonValue.offPotentialSampTime = ''
    peizhi_obj.jsonValue.synchro = ''
    peizhi_obj.jsonValue.synchroTime = ''
    peizhi_obj.jsonValue.antitheftAlarm = ''
    peizhi_obj.jsonValue.onlineAlarm = ''
    peizhi_obj.jsonValue.onlineContinu = ''
    peizhi_obj.jsonValue.startTime = ''
    peizhi_obj.jsonValue.endTime = ''
    peizhi_obj.jsonValue.iotSampInterval = ''
    peizhi_obj.jsonValue.iotSendInterval = ''
    peizhi_obj.jsonValue.polTime = ''
    peizhi_obj.jsonValue.depolTime = ''
    peizhi_obj.jsonValue.depolFastInterval = ''
    peizhi_obj.jsonValue.fastContiTime = ''
    peizhi_obj.jsonValue.iotSynorOnOff = ''
    peizhi_obj.jsonValue.IotGpsBd = ''
    peizhi_obj.jsonValue.IotTriggerSamp = ''
    peizhi_obj.jsonValue.onStartValue = ''
    peizhi_obj.jsonValue.onEndValue = ''
    peizhi_obj.jsonValue.offStartValue = ''
    peizhi_obj.jsonValue.offEndValue = ''
    peizhi_obj.jsonValue.acPotStartValue = ''
    peizhi_obj.jsonValue.acDensityStartValue = ''
    peizhi_obj.jsonValue.directCurStartValue = ''
    peizhi_obj.jsonValue.directCurEndValue = ''
    peizhi_obj.jsonValue.triggerSampInterval = ''
    peizhi_obj.jsonValue.triggerSendInterval = ''
    peizhi_obj.jsonValue.outputVoltage = ''
    peizhi_obj.jsonValue.outputCurrent = ''
    peizhi_obj.jsonValue.outputPotential = ''
    peizhi_obj.jsonValue.pieceOffPotential = ''
    peizhi_obj.jsonValue.workWay = ''

}
//#endregion

//#region 规则设置
const value_text = (e) => {
    let text = ''
    if (e.symbol == '>' || e.symbol == '<') {
        text = e.value
    } else {
        text = e.startValue + e.symbol + e.endValue
    }
    return text
}
const shezhi_off = ref(false)
const shezhi_obj = reactive({
})
const shezhi_data = ref({})
const shezhi_btn = (e) => {
    peizhi_data.value = e
    find_data2.deviceNo = e.deviceNo
    list_api2()
    shezhi_off.value = true
}

//#region 分页列表
const list_data2 = ref([])
const find_data2 = reactive({
    pageNo: 1,
    pageSize: 20,
    ruleName: '',
    deviceNo: '',

})
const total2 = ref(0)

// 分页器一夜显示多少数据页面
const size_change_btn2 = () => {
    find_data2.pageNo = 1
    list_api2()
}
const search_btn2 = () => {
    list_api2()

}
// 分页器跳转页面
const current_change_btn2 = () => {
    list_api2()
}

const list_api2 = () => {
    const loading = ElLoading.service({
        lock: true,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    getAlarmRuleListByPage(find_data2).then(res => {

        if (res.resultStatus.resultCode == '0000') {
            list_data2.value = res.value.list
            total2.value = res.value.total
        } else {
            return ElMessage({
                message: res.resultStatus.resultMessage,
                type: 'warning',
            })
        }
        loading.close()

    })
}

//#region 表格数据处理
const table_data_list2 = reactive([
    { name: 'ruleName', displayName: '规则名称', minWidth: '', enablePinning: true },
    { name: 'type', displayName: '规则类型', minWidth: '', enablePinning: true },
    { name: 'showValue', displayName: '规则属性', minWidth: '', enablePinning: true },
    { name: 'symbol', displayName: '规则符号', minWidth: '', enablePinning: true },
    { name: 'value', displayName: '规则值', minWidth: '', enablePinning: true },
    { name: 'set', displayName: '操作', minWidth: '', enablePinning: true },
])


//#region 新增
const add_off2 = ref(false)
const add_data2 = reactive({
    endValue: '',
    remark: '',
    ruleKey: '',
    ruleName: '',
    startValue: '',
    symbol: '',
    type: '',
    value: '',
    id: '',
    deviceNo: '',
})
const add_btn2 = () => {
    up_data2.value.fileName = ''
    title2.value = '新增规则:'
    add_data2.endValue = ''
    add_data2.remark = ''
    add_data2.ruleKey = ''
    add_data2.ruleName = ''
    add_data2.startValue = ''
    add_data2.symbol = ''
    add_data2.type = ''
    add_data2.value = ''
    add_data2.id = ''
    add_data2.deviceNo = find_data2.deviceNo
    up_off2.value = false
    add_off2.value = true

}




const add_ok2 = () => {

    if (!add_data2.ruleName) {
        return ElMessage({
            message: '请填写规则名称',
            type: 'warning',
        })
    } else if (!add_data2.type) {
        return ElMessage({
            message: '请填写规则类型',
            type: 'warning',
        })
    } else if (!add_data2.ruleKey) {
        return ElMessage({
            message: '请填写规则属性',
            type: 'warning',
        })
    } else if (!add_data2.symbol) {
        return ElMessage({
            message: '请填写规则符合',
            type: 'warning',
        })
    }






    if (up_off2.value) {
        updateAlarmRule(add_data2).then(res => {
            if (res.resultStatus.resultCode == '0000') {
                list_api2()
                add_off2.value = false
                return ElMessage({
                    message: res.resultStatus.resultMessage,
                    type: 'success',
                })
            } else {
                return ElMessage({
                    message: res.resultStatus.resultMessage,
                    type: 'warning',
                })
            }
        })
    } else {
        saveAlarmRule(add_data2).then(res => {
            if (res.resultStatus.resultCode == '0000') {
                list_api2()
                add_off2.value = false
                return ElMessage({
                    message: res.resultStatus.resultMessage,
                    type: 'success',
                })
            } else {
                return ElMessage({
                    message: res.resultStatus.resultMessage,
                    type: 'warning',
                })
            }
        })
    }



}

const add_no2 = () => {
    add_off2.value = false
}

const title2 = ref('新增人员:')
const up_off2 = ref(false)
const up_data2 = ref({})
//#region 修改
const up_btn2 = async (e) => {
    add_data2.type = e.type
    await getAlarmTypeList_Api()
    add_data2.endValue = e.endValue
    add_data2.remark = e.remark
    add_data2.ruleKey = e.ruleKey
    add_data2.ruleName = e.ruleName
    add_data2.startValue = e.startValue
    add_data2.symbol = e.symbol

    add_data2.value = e.value
    add_data2.deviceNo = find_data2.deviceNo
    add_data2.id = e.id
    up_data2.value = e
    title2.value = '修改规则:'

    up_off2.value = true
    add_off2.value = true

}
//#region 删除
const del_btn2 = (e) => {

    ElMessageBox.confirm(
        '是否确认删除该规则?',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
            distinguishCancelAndClose: 'true',
        }
    )
        .then(() => {
            let ps = [e.id]
            deleteAlarmRule(ps).then(res => {
                if (res.resultStatus.resultCode == '0000') {
                    list_api2()
                    return ElMessage({
                        message: res.resultStatus.resultMessage,
                        type: 'success',
                    })
                } else {
                    return ElMessage({
                        message: res.resultStatus.resultMessage,
                        type: 'warning',
                    })
                }
            })
        })
        .catch((e) => {


        })

}
//#endregion
//#endregion

//#endregion

//#region 表格选择
const table_list2 = ref([])
const selection_change_btn2 = (e) => {
    table_list2.value = e
    console.log(e)
}
//#endregion
//#endregion

const shezhi_no = () => {
    shezhi_off.value = false
}
//#endregion


//#region 删除
const del_btn = (e) => {

    console.log(e)
    ElMessageBox.confirm(
        '是否确认删除该监测点?',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
            distinguishCancelAndClose: 'true',
        }
    )
        .then(() => {
            let ps = [e.id]
            deleteCheckPoint(ps).then(res => {
                if (res.resultStatus.resultCode == '0000') {
                    list_api()
                    return ElMessage({
                        message: res.resultStatus.resultMessage,
                        type: 'success',
                    })
                } else {
                    return ElMessage({
                        message: res.resultStatus.resultMessage,
                        type: 'warning',
                    })
                }
            })
        })
        .catch((e) => {


        })

}
//#endregion

//#region 搜索
const search_btn = () => {
    // localStorage.setItem('monitoring_point_management', CircularJSON.stringify(find_data))
    list_api()

}
//#endregion

</script>
<style>
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>
<style scoped lang='scss'>
.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}

.up_css {
    cursor: pointer !important;
    width: 100%;
    background: #271e1e2b;
    border-radius: 5px;
}

.del_btn_Css {
    margin-top: 10px;
}

.list_data_Css {
    width: 100%
}

.current_change_btn_css {
    margin-top: 20px
}




.map_input {
    width: 100%;
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;

}

.div_bg:hover {
    background-color: darkgray;
}
</style>
<style>
.col-items::-webkit-scrollbar {
    width: 5px !important;
}

.col-items>label {
    margin-left: 0px !important;
    margin-top: 5px;
    width: 100%;
}
</style>
